<template>
	<view class="cartContainer">
     <view class="header">
    	  <text>购物袋</text>
        <text>{{length}}1</text>
     </view>
      <block v-if="show">
          <scroll-view scroll-y="true" class="scroll_body">
            <view class="scroll_body_shop">
              <view class="shop_Top">
                购物袋空荡荡的~赶紧去填满~
              </view>
              <view class="shop_middle">
                <image src="../../static/images/mv.png" class="images"></image>
              </view>
              <button class="button" type="default">去逛逛</button>
            </view>
          </scroll-view>
       
      </block>
      <block v-else>
        <scroll-view scroll-y="true" >
          <!-- 滚动条 -->
          <view>
            <u-notice-bar  speed="80"  color="#fff" icon="  " bgColor="#c6bf7f" :text="text1"></u-notice-bar>
          </view>
          <!-- 轮播图 -->
          <view class="banner">
                
            <u-swiper
                  :list="bannerList"
                  radius="0"
                  indicator
                  indicatorMode="dot"
                  circular
            ></u-swiper>       
          </view>
            <!-- 卡片模块 -->
            <block v-if="fin.length>0">
              <view class="cart_body">
                  <view class="cart_body_top">
                    <view class="top">
                      <u-icon size="28" name="home" ></u-icon>
                      <view class="cart_body_top_wanzi">
                        <text @click="toHome">完子之家</text>
                        <block v-if="Administration" >
                          <text @click="handleAdministration" style="background-color: #c6847e; color: #FFFFFF; line-height: 50upx; height:50upx ;">管理</text>
                        </block>
                        <block v-else="Administration">
                          <text @click="handleAdministration" style="background-color: #c6847e; color: #FFFFFF; line-height: 50upx; height:50upx ;">管理完成</text>
                        </block>
                      </view>  
                    </view>
                    <view class="cart_body_item">
                      <view class="item_top">
                        <view class="left"> 
                          <text>满N件减送</text>
                        </view>
                        <view class="right">
                          <text>【日常】圣诞/银翼细跟第二件减20</text>
                          <text class="manjian">满件减送></text>
                        </view>
                      </view>
                      <view class="item_bottem">
                        <view class="item_bottem_left">
                          <text class="iconfont icon-xuanzhong selected"></text>
                        </view>
                        <view class="item_bottem_middle">
                          <image src="https://pub-img.perfectdiary.com/material/image/2021/11/0d7b7cd0e81c42388a2b55e56c53b8c9.png" class="item_bottem_middle_img"></image>
                          <text class="kehuode">可获得积分</text>
                        </view>
                        <view class="item_bottem_right">
                          <text class="dierjian">第二件减20【完子之家】完美日记圣诞细跟（许愿星限定真的很好哈哈哈不知道了你说啥我听不到）</text>
                          <view class="item_bottem_right_mid">
                            <text >已选L19（许愿星限定版）</text>
                            <text >x1</text>
                          </view>
                          <view class="item_bottem_right_bottem">
                            <view class="item_bottem_right_bottem_left">
                              <text>¥99.90</text>
                              <text class="remove">¥129.90</text>
                            </view>
                            <view class="countCtrl">
                              <text class="add">+</text>
                              <text class="count">1</text>
                              <text class="del" >-</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="cart_body_item">
                      <view class="item_top">
                        <view class="left"> 
                          <text>满N件减送</text>
                        </view>
                        <view class="right">
                          <text>【日常】圣诞/银翼细跟第二件减20</text>
                          <text class="manjian">满件减送></text>
                        </view>
                      </view>
                      <view class="item_bottem">
                        <view class="item_bottem_left">
                          <text class="iconfont icon-xuanzhong selected"></text>
                        </view>
                        <view class="item_bottem_middle">
                          <image src="https://pub-img.perfectdiary.com/material/image/2021/11/0d7b7cd0e81c42388a2b55e56c53b8c9.png" class="item_bottem_middle_img"></image>
                          <text class="kehuode">可获得积分</text>
                        </view>
                        <view class="item_bottem_right">
                          <text class="dierjian">第二件减20【完子之家】完美日记圣诞细跟（许愿星限定真的很好哈哈哈不知道了你说啥我听不到）</text>
                          <view class="item_bottem_right_mid">
                            <text >已选L19（许愿星限定版）</text>
                            <text >x1</text>
                          </view>
                          <view class="item_bottem_right_bottem">
                            <view class="item_bottem_right_bottem_left">
                              <text>¥99.90</text>
                              <text class="remove">¥129.90</text>
                            </view>
                            <view class="countCtrl">
                              <text class="add">+</text>
                              <text class="count">1</text>
                              <text class="del" @click="handleCountNum(false,index)">-</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="cart_body_bottem"></view>
                  </view>
                </view>
              
            </block>
            <block v-else="fin.length=0">
                <scroll-view scroll-y="true" class="scroll_body">
                  <view class="scroll_body_shop">
                    <view class="shop_Top">
                      购物袋空荡荡的~赶紧去填满~
                    </view>
                    <view class="shop_middle">
                      <image src="../../static/images/mv.png" class="images"></image>
                    </view>
                    <button class="button" type="default">去逛逛</button>
                  </view>
                </scroll-view>
             
            </block>
            
        </scroll-view>
        <block v-if="Administration">
          <view class="Fixed">
                    <view class="Fixed_icon">
                      <text class="iconfont icon-xuanzhong selected"></text>
                      <text>全选</text>    
                    </view>
                    <view class="Fixed_right">
                      <view class="heji"> 合计 <text class="price"> ¥199.80</text></view>
                      <text class="totul">总价199.80  已减0.00</text>
                    </view>
                    <view class="settlement">
                      结算
                    </view>
                  </view>
        </block>
        <block v-else>
          <view class="Fixed">
                    <view class="Fixed_icon">
                      <text class="iconfont icon-xuanzhong "></text>
                      <text>全选</text>    
                    </view>
                    <view class="Fixed_right">
                      <!-- <view class="heji"> 合计 <text class="price"> ¥199.80</text></view>
                      <text class="totul">总价199.80  已减0.00</text> -->
                    </view>
                    <view class="settlement">
                      删除
                    </view>
                  </view>
        </block>
      </block>
      </view>
</template>
<script>
 import {mapActions,mapState,mapGetters} from "vuex"
	export default {
		data() {
			return {
				show:false,
				id:'',
        Administration:true,
        card:true,
        length:'',
        text1: '因疫情防控升级,快递停运区域较为频繁,停发区域较多,给您造成不便尽请谅解,有问题请咨询商城客服',
        list1: [
       "https://yanxuan.nosdn.127.net/3c214b2455464e9c1001bb0d57b3258f.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
       "https://yanxuan.nosdn.127.net/3c6231c5e81f2272c7cf38e39175141e.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
       "https://yanxuan.nosdn.127.net/9add949b96c9d4b165541f6af67e1255.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
              ]     
			};
		},

		mounted() {
			// var app = getApp()
			// let id = app.globalData.id
			this.id = getApp().globalData.id
			console.log(getApp().globalData.id)
			this.id = this.fin[0].id
		},
    onLoad() {
    },
    computed:{
      ...mapState({
        // bannerList:state=>state.cart.cartList[0]?state.cart.cartList[0].category.bannerUrlList:[],
		newSkuList:state=>state.detailDate.newSkuList,
		cartId:state=>state.cart.cartId
      }),
      ...mapGetters(['skuList','fin',])
    },
    methods :{
      ...mapActions(['getcartList']),
      handleAdministration(){
        if(this.Administration){
          this.Administration=false
        }else{
          this.Administration=true
        }
      },
      toHome(){
        wx.switchTab({
          url:"/pages/index/index",
        })
      }
      
    },
	beforeMount() {	
      this.getcartList()
	},
    mounted() {
      // console.log(this.skuList)

	  // console.log(this.newCart)
      this.length = this.fin.length
    }
     
	}
</script>

<style lang="stylus">
.cartContainer
  background-color #f5f5f5
  height 1400upx
  position relative
  .header
    width 100%
    height 100upx
    text-align center
    line-height 100upx
    background-color #fff
  .scroll_body
    width 100%
    height 1080upx
    background-color #f5f5f5
    .scroll_body_shop
      .shop_Top
        width 100%
        height 80upx
        text-align center
        line-height 100upx
        margin-top 100upx
        color #c78680
      .shop_middle
        width 450upx
        height 450upx
        margin 0 auto
        .images
          width 100%
          height 100%
      .button
        width 450upx
        height 70upx
        line-height 70upx
        background-color #b50006 
        color #FFFFFF
        margin-top 50upx
  .cart_body
    width 100%
    background-color #f5f5f5
    padding-top 20upx
    .cart_body_top
      margin 0 19upx
      .top
        margin 0  auto
        border-radius 25upx 25upx 0 0
        background-color #fff
        width 96%
        height 120upx
        display flex
        border-bottom 2upx solid #f5f5f5
        padding 0 15upx
        .cart_body_top_wanzi
          height 60upx
          line-height 60upx
          margin-top 30upx
          width 90%
          margin-left 10upx
          display flex
          justify-content space-between
      .cart_body_item
        background-color #fff
        .item_top
          padding 30upx 0
          display flex
          .left
            width 17%
            height 20upx
            line-height 20upx
            padding 15upx
            font-size 24upx
            background-color #c32b31
            color #FFFFFF
          .right
            align-items center
            justify-content: center;
            display flex
            justify-content space-between
            width 83%
            font-size 28upx
            .manjian
              font-size 26upx
              color #c78680
        .item_bottem
          padding 40upx  0
          padding-bottom 60upx
          display flex
          border-bottom 5upx solid #f5f5f5
          .item_bottem_left
            .iconfont
              font-size 40upx
              line-height 165upx
              margin 0 15upx
              color #999
              &.selected
                color #BB2C08
          .item_bottem_middle
            width 200upx
            height 200upx
            border-radius 10upx
            
            position relative
            .item_bottem_middle_img
              border-radius 10upx
              width 100%  
              height 100%
              
            .kehuode
              position absolute
              left 0upx
              width 100%
              top 165upx
              color #FFFFFF
              font-size 26upx
              text-align center
              background-color rgba(0,0,0,0.6)
          .item_bottem_right
            padding 0 20upx 
            width 70%
            .dierjian
              overflow hidden
              display -webkit-box
              -webkit-box-orient vertical
              -webkit-line-clamp 2
          .item_bottem_right_mid
            display flex
            justify-content space-between
            font-size 28upx
            color #cfcfcf
          .item_bottem_right_bottem
            display flex
            position relative
            .item_bottem_right_bottem_left
              display flex
              flex-direction column
              color #BB2C08
              font-weight 700
              font-size 28upx
              .remove
                text-decoration:line-through
                color #cfcfcf
                font-size 26upx
                font-weight 400
            .countCtrl
              position absolute
              right 20upx
              bottom 0upx
              text
                display inline-block
                width 60upx
                height 50upx
                text-align center
                line-height 50upx
                border 1upx solid #EEEEEE
                &:nth-child(2)
                  border none
                  border-top 1upx solid #EEEEEE
                  border-bottom 1upx solid #EEEEEE
      .cart_body_bottem
        height 110upx
  .Fixed
    width 100%
    height 110upx
    position fixed
    left 0
    bottom 0
    display flex
    justify-content space-between
    background-color #FFFFFF
    .Fixed_icon
      .iconfont
        font-size 40upx
        line-height 110upx
        margin 0 15upx
        color #999
        &.selected
          color #BB2C08
    .Fixed_right
      margin-left 50upx
      display flex
      align-items center
      justify-content center
      flex-direction column
      .heji
        font-size 24upx
        color #999
        .price
          font-size 36upx
          color #BB2C08
      .totul
        font-size 26upx
    .settlement
      width 30%
      height 100%
      background-color #b50006
      color #FFFFFF
      display flex
      align-items center
      justify-content center
</style>
